<template>
  <div class="wrap">
    <!--好友排行標題-->
    <div class="head"></div>
    <div class="rank-list">
      <div class="list-item" v-if="rankList.length>0" :data-rank="index+1" v-for="(item,index) in rankList" :key="index" :class="{myInfo:item.userId==appInfo.userId}">
        <div class="item-left">
          <img v-if="item.headImgUrl" :src="item.headImgUrl" alt="">
          <img v-else src="/static/default-head.png" alt="">
        </div>
        <div class="item-center">
          <div class="name" v-if="item">{{item.nickname}}</div>
        </div>
        <div class="">
          <div class="card" v-if="item">{{item.cardNumber}}关</div>
        </div>
      </div>
    </div>
    <!-- <div class="head-2">我的排名</div> -->
    <!-- <div class="my-rank"> -->

        <div class="list-item" :data-rank="myRankInfo.rank" data-bg="irank">
          <img v-if="myRankInfo.headImgUrl" :src="myRankInfo.headImgUrl" alt="">
          <img v-else src="/static/default-head.png" alt="">
          <div class="name" v-if="myRankInfo">{{myRankInfo.nickname}}</div>
          <div class="card" v-if="myRankInfo">{{myRankInfo.cardNumber}}关</div>
        </div>
        <div class="irank-bottom">
        <button class="grup-btn" open-type="share" plain="true"><img src="/static/grup.png" alt=""></button>
      <!-- <div class="rank">{{myRankInfo.rank}}</div>
      <img v-if="myRankInfo.headImgUrl" :src="myRankInfo.headImgUrl" alt="">
      <img v-else src="/static/default-head.png" alt="">
      <div class="rank-info">
        <div class="name">{{myRankInfo.nickname}}</div>
        <div class="card">通关数：{{myRankInfo.cardNumber}}关</div>
      </div> -->
    <!-- </div> -->
      </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { shareInfo } from "@/config/shareInfo";
export default {
  data() {
    return {
      rankList: [],
      topList: [],
      myRankInfo: {
        rank: 1,
        nickname: "未授权",
        cardNumber: 0
      },
      shareInfo: shareInfo
    };
  },
  computed: {
    ...mapState(["IMGHEAD", "appInfo", "sysConfig"])
  },

  methods: {
    getRankList() {
      this.fly.post("/getRankList").then(res => {
        this.rankList = res.data.Result;
        this.rankList.forEach((item, index) => {
          if (item.userId == this.appInfo.userId) {
            this.myRankInfo = item;
            this.myRankInfo.rank = index + 1;
          }
        });
        // if (this.rankList.length > 3) {
        //   this.topList = this.rankList.slice(0, 3);
        //   this.rankList.splice(0, 3);
        // } else if (this.rankList.length <= 3) {
        //   this.topList = this.rankList;
        //   this.rankList = [];
        // }
      });
    }
  },
  mounted() {
    this.getRankList();
  },
  onShareAppMessage: function(res) {
    let x = Math.ceil(Math.random() * 7);
    console.log(this.shareInfo[x]);
    return {
      title: this.shareInfo[x - 1].text,
      imageUrl: this.shareInfo[x - 1].url,
      path: "/pages/entry/index?userId=" + this.appInfo.userId + "&subjectId=0",
      success: res => {
        this.fly
          .post("/updateStrength", {
            count: 30,
            type: 0
          })
          .then(res => {
            if (res.data.Result >= this.sysConfig.maxEnergy) {
              wx.showToast({
                title: "金币已达上限",
                icon: "none"
              });
            } else {
              wx.showToast({
                title: "分享成功,金币+30",
                icon: "none"
              });
            }
          });
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: scroll;
  background-size: 750rpx 1206rpx;
  background-repeat: no-repeat;
  background-color: #fcda7b;
  background-image: url("");
}
.head {
  position: relative;
  margin: 0 auto;
  z-index: 1;
  width: 92%;
  height: 153rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image:
  url('');

}

.irank-bottom {
  position: fixed;
  bottom: 0;
  padding-bottom: 20rpx;
  width: 100%;
  background-color: #fff;
}


// .head-2 {
//   font-size: 36rpx;
//   padding: 32rpx 0;
//   font-weight: bold;
//   color: #fff;
//   text-align: center;
//   line-height: 1;
// }

.grup-btn{
  border: none;
  width: 390rpx;
  height: 95rpx;
  margin-top: 30rpx;
  img{
    width: 100%;
    height: 100%;
  }
}

// list
.rank-list {
  position: relative;
  top: -13rpx;
  height: 685rpx;
  overflow: scroll;
}
.list-item {
  display: flex;
  // align-items: center;
  position: relative;
  margin: 0 auto;
  width: 71%;
  height: 130rpx;
  background: #fff;
  border: 4rpx solid #fff;
  border-radius: 8rpx;
  padding-left: 100rpx;
  margin-bottom: 16rpx;
  position: relative;
  &::before {
    position: absolute;
    top: 60rpx;
    left: 208rpx;
    // content: '第' attr(data-rank)'名';
    font-weight: bold;
    color: #fff;
  }
  &::after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20rpx;
    left: 10rpx;
    content: attr(data-rank);
    color: #f46685;
    font-size: 45rpx;
    font-weight: bold;
    width: 65rpx;
    height: 65rpx;
    border-radius: 60rpx;
    border: 6rpx solid #f46685;
  }
  .name,
  .card {
    font-size: 30rpx;
    font-weight: bold;
    color: #aaa;
  }
  .name {
    margin-top: 15rpx;
    width: 170rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  img {
    margin: 12rpx 0 10rpx 0;
    width: 85rpx;
    height: 85rpx;
    border-radius: 80rpx;
    margin-right: 24rpx;
  }
  .card {
    color: #f46685;
    position: absolute;
    right: 38rpx;
    top: 68%;
    min-width: 150rpx;
    transform: translateY(-50%);
    font-size: 40rpx;
    text-align: right;
    &::after {
      position: absolute;
      top: -45rpx;
      right: 0;
      min-width: 150rpx;
      content: "通关数";
      font-size: 32rpx;
      color: #aaa;
    }
  }
}

//排行榜 //獎牌
[data-rank="1"], [data-rank="2"], [data-rank="3"]{
  &::before {
    position: absolute;
    top: 60rpx;
    left: 210rpx;
    content: "冠军";
    color: #f46685;
    font-weight: bold;
  }
  &::after {
    width: 80rpx;
    height: 80rpx;
    content: "";
    background-size: 100%;
    background-repeat: no-repeat;
    background-image:
    url('');
    border-radius: none;
    border: none;

  }
}
[data-rank="2"] {
  &::before {
    content: "亚军";
  }
  &::after {
    background-image:
    url('');
  }
}
[data-rank="3"] {
  &::before {
    content: "季军";
  }
  &::after {
    background-image:
    url('');
  }
}

//底部個人排名
[data-bg="irank"]{
  position: fixed !important;
  bottom: 132rpx;
  width: 100%;
  height: 210rpx !important;
  background-size: cover;
  background-image:
  url('');
  background-color: transparent;
  border: none;
  padding-left: 0;
  img {
    position: absolute;
    top: 40rpx;
    left: 20rpx;
    width: 110rpx !important;
    height: 110rpx !important;
  }
  .name {
    margin: 50rpx 0 0 170rpx;
    font-size: 40rpx;
    color: #be7a05;
  }
  .card {
    color: #fff;
    top: 73% !important;
    &::after {
      font-size: 40rpx;
      color: #be7a05;
      top: -55rpx;
    }
  }
  &::after {
    opacity: 0;
  }
  &::before {
    top: 110rpx;
    left: 180rpx;
    color: #fff;
    content: '第' attr(data-rank)'名';
    font-size: 45rpx;
  }
}




.myInfo {
  &::before {
    border-top-color: #ffcf3a;
  }
}
.my-rank {
  display: flex;
  align-items: center;
  // position: fixed;
  // bottom: 0;
  // left: 0;
  width: 100%;
  padding: 14rpx 0;
  background: #f46685;
  .rank {
    padding: 0 40rpx;
    font-size: 60rpx;
    font-weight: bold;
    color: #fff;
  }
  img {
    width: 132rpx;
    height: 132rpx;
    border-radius: 50%;
    border: 6rpx solid #fff;
    margin-right: 40rpx;
  }
  .rank-info {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 50%;
    font-weight: bold;
    flex-direction: column;
    color: #fff;
    .name {
      font-size: 36rpx;
      margin-bottom: 24rpx;
      line-height: 1;
      width: 190rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .card {
      font-size: 30rpx;
      line-height: 1;
    }
  }
}
</style>
